<script setup lang="ts">
import {
  Modal,
  Form,
  FormItem,
  FormInstance,
  Input,
  message,
  UploadDragger,
  Space,
} from "ant-design-vue";
import { InboxOutlined } from "@ant-design/icons-vue";

import { MusicInfoInput, Service } from "../api";
import { reactive, ref, watch } from "vue";
const open = defineModel<boolean>("open", { required: true });
const emits = defineEmits<{
  finish: [];
  toReigister: [];
}>();
const formRef = ref<FormInstance>();
const formState = reactive<Partial<MusicInfoInput>>({});
const loading = ref(false);
const submit = async () => {
  try {
    await formRef.value?.validate();
    await Service.createMusicInfo({
      input: formState as MusicInfoInput,
    });
    emits("finish");
    open.value = false;
    message.success("上传音乐成功");
  } catch (error) {}
};

const musicUploadChange = ({ file }: any) => {
  if (file.response) {
    formState.filePath = file.response;
  }
};
const coverUploadChange = ({ file }: any) => {
  if (file.response) {
    formState.coverPath = file.response;
  }
};
const lyricsUploadChange = ({ file }: any) => {
  if (file.response) {
    formState.lyricsPath = file.response;
  }
};
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
watch(open, () => {
  if (open) {
    formRef.value?.resetFields();
    fileList1.value = [];
    fileList2.value = [];
    fileList3.value = [];
  }
});
</script>
<template>
  <Modal
    v-model:open="open"
    title="上传音乐"
    @ok="submit"
    ok-text="确定"
    cancel-text="取消"
    :confirmLoading="loading"
    :width="720"
    style="overflow: hidden; min-width: 720px"
  >
    <Form
      ref="formRef"
      style="padding-top: 15px"
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <FormItem
        label="音乐标题"
        name="title"
        :rules="[{ required: true, message: '音乐标题不能为空' }]"
      >
        <Input v-model:value="formState.title" />
      </FormItem>
      <FormItem
        label="艺术家"
        name="artist"
        :rules="[{ required: true, message: '艺术家不能为空' }]"
      >
        <Input v-model:value="formState.artist" />
      </FormItem>
      <FormItem
        label="专辑"
        name="album"
        :rules="[{ required: true, message: '专辑不能为空' }]"
      >
        <Input v-model:value="formState.album" />
      </FormItem>

      <FormItem label="音乐文件">
        <Space style="width: 100%">
          <UploadDragger
            style="width: 180px"
            action="/api/v1/upload"
            :max-count="1"
            @change="musicUploadChange"
            v-model:file-list="fileList1"
            accept="audio/mpeg, audio/mp3"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined></InboxOutlined>
            </p>
            <p class="ant-upload-text" style="font-size: 12px; padding: 0 10px">
              点击或者拖拽<strong>音乐文件</strong><br />到这个区域上传
            </p>
          </UploadDragger>
          <UploadDragger
            style="width: 180px"
            action="/api/v1/upload"
            :max-count="1"
            @change="coverUploadChange"
            v-model:file-list="fileList2"
            accept="image/*"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined></InboxOutlined>
            </p>
            <p class="ant-upload-text" style="font-size: 12px; padding: 0 10px">
              点击或者拖拽<strong>封面文件</strong><br />到这个区域上传
            </p>
          </UploadDragger>
          <UploadDragger
            style="width: 180px"
            action="/api/v1/upload"
            :max-count="1"
            @change="lyricsUploadChange"
            v-model:file-list="fileList3"
            accept=".lrc"
          >
            <p class="ant-upload-drag-icon">
              <InboxOutlined></InboxOutlined>
            </p>
            <p class="ant-upload-text" style="font-size: 12px; padding: 0 10px">
              点击或者拖拽<strong>歌词文件</strong><br />到这个区域上传
            </p>
          </UploadDragger>
        </Space>
      </FormItem>
    </Form>
  </Modal>
</template>
<style>
.ant-upload-list-item {
  width: 180px;
  overflow: hidden;
  height: 30px;
}
</style>
